import React, {Suspense} from 'react';
import {BrowserRouter, Route, Switch} from 'react-router-dom';
import LoadingPage from "./components/loadingPage/loadingPage";
import Header from "./components/header/header";
import './app.less'

const enginerIntroduce = React.lazy(() => import('./pages/enginerIntroduce/index'))
const messageBoard = React.lazy(() => import('./pages/messageBoard/index'))
const homeRouter = React.lazy(() => import('./pages/home/homeRouter'));
const news = React.lazy(() => import('./pages/news/news'))
const introduce = React.lazy(() => import('./pages/introduce/introduce'))
const example = React.lazy(() => import('./pages/example/example'))

function App() {
    return (
        <div className="App">
            <div className='index-container'>
                <BrowserRouter>
                    <Header/>
                    <Suspense fallback={<LoadingPage/>}>
                        <Switch>
                            <Route path='/introduce' component={introduce}/>
                            <Route path='/example' component={example}/>
                            <Route path='/news' component={news}/>
                            <Route path='/enginerIntroduce' component={enginerIntroduce}/>
                            <Route path='/messageBoard' component={messageBoard}/>
                            <Route path='/' component={homeRouter}/>
                        </Switch>
                    </Suspense>
                </BrowserRouter>
            </div>
        </div>
    );
}

export default App;
